import {VueComponent, ComponentProps, Component, Mut} from 'vue3-oop';
import {NCard, NSpace, NTag, NLayout, NLayoutSider, NLayoutContent, NModal} from 'naive-ui';
import styles from "./index.module.scss";
import {nicon} from "@/utils/IconUtil";

import ToolbarPanel from './ToolbarPanel';
import SparePanel from './SparePanel';
import DraftPanel from './DraftPanel';
import ConfigPanel from './ConfigPanel';
import ViewPanel from './ViewPanel'

import FormData from './types/FormData'

interface IProps {
  maxWidth?:number,
  maxHeight?:number
}
@Component()
export default class FormDesigner extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    maxWidth: {default: 800},
    maxHeight: {default: 600}
  }

  /** 表单结构数据 */
  @Mut() draftFormData = new FormData();

  @Mut() preview = false;

  render(){
    const height = this.props.maxHeight as number, width = this.props.maxWidth as number;
    const headerPadding = 10;
    const headerHeight = 34;
    const contentPadding = 10;
    const contentHeight = height - headerPadding*2 - headerHeight - contentPadding - 2;

    return(
      <NCard
        class={[styles.form_designer]}
        style={{minHeight:`${height}px`}}
      >
        {{
          header:()=>(
            <NSpace><NTag bordered={false} size={'large'} style={{fontSize:'18px'}} color={{color:'whitesmoke'}}>
              {{ avatar: nicon("DocumentFlowchart20Filled"), default: ()=>"表单设计器" }}
            </NTag></NSpace>
          ),
          'header-extra':()=>(<><ToolbarPanel formData={this.draftFormData} onPreview={()=>{this.preview=true}}/></>),
          default:()=>(
            <NLayout
              hasSider
            >
              <NLayoutSider
                class={styles.left_sider}
                nativeScrollbar={false}
                style={{maxHeight:`${contentHeight}px`}}
              >
                <SparePanel />
              </NLayoutSider>
              <NLayoutContent
                class={styles.center_content}
                nativeScrollbar={false}
                style={{maxHeight:`${contentHeight}px`}}
              >
                <DraftPanel
                  formData={this.draftFormData}
                  maxHeight={contentHeight}
                />
              </NLayoutContent>
              <NLayoutSider
                class={styles.right_sider}
                nativeScrollbar={false}
                style={{maxHeight:`${contentHeight}px`}}
              >
                <ConfigPanel
                  formData={this.draftFormData}
                />
              </NLayoutSider>
              <NModal
                show={this.preview}
                onMaskClick={()=>{this.preview=false}}
              >
                <NCard
                  style="width: 1000px"
                  title="表单预览"
                  role="dialog"
                  aria-modal="true"
                >
                  <ViewPanel formData={this.draftFormData} />
                </NCard>
              </NModal>
            </NLayout>
          )
        }}
      </NCard>
    )
  }
}